<template>
	<div class="severe-damage-form">
		<div class="form-header">
			<h2 class="form-title">严重损坏房屋巡查</h2>
		</div>

		<el-form ref="severeForm" :model="formData" :rules="rules" label-width="220px" label-position="left"
			class="form-content" :validate-on-rule-change="false">
			<!-- 基本情况 -->
			<div class="section inspection-item">
				<h3 class="section-title">基本情况</h3>

				<!-- 地址行 -->
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="地址" prop="address">
							<el-input v-model="formData.address" placeholder="请输入地址">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="存在问题" prop="addressStatus">
							<el-select v-model="formData.addressStatus" placeholder="选择存在问题">
								<el-option label="选择存在问题" value=""></el-option>
								<el-option label="存在问题" value="exists"></el-option>
								<el-option label="无问题" value="none"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 层数行 -->
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="地上层数（层）" prop="aboveGroundFloors">
							<el-input-number v-model="formData.aboveGroundFloors" :min="0" :precision="0"
								controls-position="right" style="width: 100%" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="地下层数（层）" prop="undergroundFloors">
							<el-input-number v-model="formData.undergroundFloors" :min="0" :precision="0"
								controls-position="right" style="width: 100%" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 建筑面积和高度行 -->
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="建筑面积（平方米）" prop="buildingArea">
							<el-input-number v-model="formData.buildingArea" :min="0" :precision="2" placeholder="0.00"
								controls-position="right" style="width: 100%" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="建筑高度（米）" prop="buildingHeight">
							<el-input-number v-model="formData.buildingHeight" :min="0" :precision="2"
								placeholder="0.00" controls-position="right" style="width: 100%" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 建筑期间和房屋套数行 -->
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="建筑期间" prop="buildingPeriod">
							<el-date-picker v-model="formData.buildingPeriod" type="year" placeholder="2025"
								format="yyyy" value-format="yyyy" style="width: 100%" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="房屋套数（套）" prop="houseCount">
							<el-input-number v-model="formData.houseCount" :min="0" :precision="0"
								controls-position="right" style="width: 100%" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 房屋用途和保护建筑性质行 -->
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="房屋用途" prop="houseUsage">
							<el-radio-group v-model="formData.houseUsage">
								<el-radio v-for="item in dictData.houseUsageDict" :key="item.id" :label="item.id">
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="选择保护建筑性质" prop="protectionNature">
							<el-radio-group v-model="formData.protectionNature">
								<el-radio v-for="item in dictData.protectionNatureDict" :key="item.id" :label="item.id">
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 保护建筑类型行 -->
				<el-row>
					<el-col :span="24">
						<el-form-item label="保护建筑类型" prop="protectionType">
							<el-radio-group v-model="formData.protectionType">
								<el-radio v-for="item in dictData.protectionTypeDict" :key="item.id" :label="item.id">
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 结构类型行 -->
				<el-row>
					<el-col :span="24">
						<el-form-item label="结构类型" prop="structureType">
							<el-radio-group v-model="formData.structureType">
								<el-radio v-for="item in dictData.structureTypeDict" :key="item.id" :label="item.id">
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 楼板形式行 -->
				<el-row>
					<el-col :span="24">
						<el-form-item label="楼（房间）板形式" prop="floorForm">
							<el-radio-group v-model="formData.floorForm">
								<el-radio v-for="item in dictData.floorFormDict" :key="item.id" :label="item.id">
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</div>

			<!-- 装修部分 -->
			<div class="section structure-section">
				<h3 class="section-title">装修部分</h3>
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="楼地面是否存在损坏" prop="hasNewDamage">
							<el-radio-group v-model="formData.hasNewDamage">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 城市体检附件 -->
				<el-row>
					<el-col :span="24">
						<el-form-item label="外檐装饰材料脱落照片" prop="cityInspectionAttachments">
							<DocumentUpload v-model="formData.cityInspectionAttachments" :show-tips="true" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="外檐装饰材料脱落描述" prop="address">
							<el-input v-model="formData.address" placeholder="请输入外檐装饰材料脱落描述" type="textarea">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div style="margin-bottom: 10px;">
					<el-checkbox v-model="checked">阳台栏板存在脱落风险</el-checkbox>
				</div>
				<div style="margin-bottom: 10px;">
					<el-checkbox v-model="checked">门窗是否严重破损</el-checkbox>
				</div>
				<div style="margin-bottom: 10px;">
					<el-checkbox v-model="checked">顶棚是否严重破损</el-checkbox>
				</div>
				<div style="margin-bottom: 10px;">
					<el-checkbox v-model="checked">其他问题</el-checkbox>
				</div>
			</div>

			<!-- 查勘结论部分 -->
			<div class="section structure-section">
				<h3 class="section-title">查勘结论</h3>

				<!-- 是否存在新增加的损坏部位 -->
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="是否存在新增加的损坏部位" prop="hasNewDamage">
							<el-radio-group v-model="formData.hasNewDamage">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="16" v-if="formData.hasNewDamage === 1">
						<el-form-item label="新增加的损坏情况说明" prop="newDamageDescription">
							<el-input v-model="formData.newDamageDescription" type="textarea" :rows="2"
								placeholder="请输入新增加的损坏情况说明" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 原有损坏部位是否存在扩大或程度加重 -->
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="原有损坏部位是否存在扩大或程度加重" prop="hasExistingDamageExpansion">
							<el-radio-group v-model="formData.hasExistingDamageExpansion">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="16" v-if="formData.hasExistingDamageExpansion === 1">
						<el-form-item label="原有损坏部位扩大或程度加重说明" prop="existingDamageDescription">
							<el-input v-model="formData.existingDamageDescription" type="textarea" :rows="2"
								placeholder="请输入原有损坏部位扩大或程度加重说明" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 完损评定等级是否调整 -->
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="完损评定等级是否调整" prop="isDamageGradeAdjusted">
							<el-radio-group v-model="formData.isDamageGradeAdjusted">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="16" v-if="formData.isDamageGradeAdjusted === 1">
						<el-form-item label="完损评定等级调整说明" prop="damageGradeAdjustmentDescription">
							<el-input v-model="formData.damageGradeAdjustmentDescription" type="textarea" :rows="2"
								placeholder="请输入完损评定等级调整说明" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 是否参与城市体检 -->
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="是否参与城市体检" prop="participateInCityInspection">
							<el-radio-group v-model="formData.participateInCityInspection">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="16" v-if="formData.participateInCityInspection === 1">
						<el-form-item label="城市体检说明" prop="cityInspectionDescription">
							<el-input v-model="formData.cityInspectionDescription" type="textarea" :rows="2"
								placeholder="请输入城市体检说明" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 城市体检附件 -->
				<el-row>
					<el-col :span="24">
						<el-form-item label="城市体检附件" prop="cityInspectionAttachments">
							<DocumentUpload v-model="formData.cityInspectionAttachments" :show-tips="true" />
						</el-form-item>
					</el-col>
				</el-row>
			</div>
		</el-form>
	</div>
</template>

<script>
import InspectionItem from './InspectionItem.vue'
import DocumentUpload from '@/components/DocumentUpload.vue'

export default {
	name: 'SevereDamageForm',
	components: {
		InspectionItem,
		DocumentUpload
	},
	data() {
		return {
			// 字典数据
			dictData: {
				// 房屋用途
				houseUsageDict: [{
					id: 'residential',
					name: '住宅'
				},
				{
					id: 'non-residential',
					name: '非住宅'
				}
				],
				// 保护性质
				protectionNatureDict: [{
					id: 'yes',
					name: '是'
				},
				{
					id: 'no',
					name: '否'
				}
				],
				// 保护类型
				protectionTypeDict: [{
					id: 'national',
					name: '全国重点文物保护单位'
				},
				{
					id: 'municipal',
					name: '市级文物保护单位'
				},
				{
					id: 'district',
					name: '区级文物保护单位'
				},
				{
					id: 'historical',
					name: '历史建筑'
				},
				{
					id: 'unregistered',
					name: '未登记等级'
				},
				{
					id: 'characteristic',
					name: '历史风貌建筑（特殊）'
				},
				{
					id: 'general',
					name: '历史风貌建筑（重点）'
				},
				{
					id: 'disaster',
					name: '历史风貌建筑（一般）'
				}
				],
				// 结构类型
				structureTypeDict: [{
					id: 'brick',
					name: '砖混结构'
				},
				{
					id: 'steel',
					name: '钢筋混凝土上结构'
				},
				{
					id: 'steel-wood',
					name: '钢木结构'
				},
				{
					id: 'brick-wood',
					name: '砖木结构'
				},
				{
					id: 'other',
					name: '其他'
				}
				],
				// 楼层形式
				floorFormDict: [{
					id: 'precast',
					name: '预制'
				},
				{
					id: 'cast-in-place',
					name: '现浇空心楼'
				},
				{
					id: 'wood',
					name: '木楼（房间）板'
				},
				{
					id: 'no-floor',
					name: '无楼板'
				},
				{
					id: 'other',
					name: '其他'
				}
				]
			},
			// 表单验证规则
			rules: {
				// 基本信息必填验证
				address: [{
					required: true,
					message: '请输入地址',
					trigger: 'submit'
				}],
				aboveGroundFloors: [{
					required: true,
					message: '请输入地上层数',
					trigger: 'submit'
				}],
				undergroundFloors: [{
					required: true,
					message: '请输入地下层数',
					trigger: 'submit'
				}],
				buildingArea: [{
					required: true,
					message: '请输入建筑面积',
					trigger: 'submit'
				}],
				buildingHeight: [{
					required: true,
					message: '请输入建筑高度',
					trigger: 'submit'
				}],
				buildingPeriod: [{
					required: true,
					message: '请选择建筑期间',
					trigger: 'submit'
				}],
				houseCount: [{
					required: true,
					message: '请输入房屋套数',
					trigger: 'submit'
				}],
				houseUsage: [{
					required: true,
					message: '请选择房屋用途',
					trigger: 'submit'
				}],
				protectionNature: [{
					required: true,
					message: '请选择保护建筑性质',
					trigger: 'submit'
				}],
				structureType: [{
					required: true,
					message: '请选择结构类型',
					trigger: 'submit'
				}],
				floorForm: [{
					required: true,
					message: '请选择楼板形式',
					trigger: 'submit'
				}],
				// InspectionItem 字段必填验证
				foundationIssue: [{
					required: true,
					message: '请选择地基基础是否存在问题',
					trigger: 'submit'
				}],
				concreteColumnIssue: [{
					required: true,
					message: '请选择钢筋混凝土柱是否存在缺陷',
					trigger: 'submit'
				}],
				masonryIssue: [{
					required: true,
					message: '请选择砌体结构是否存在问题',
					trigger: 'submit'
				}],
				woodenIssue: [{
					required: true,
					message: '请选择木构件是否存在问题',
					trigger: 'submit'
				}],
				roofLeakageIssue: [{
					required: true,
					message: '请选择屋面是否存在严重漏雨',
					trigger: 'submit'
				}],
				roofStructureIssue: [{
					required: true,
					message: '请选择屋面构造层是否存在缺陷',
					trigger: 'submit'
				}],
				floorOverallDamageIssue: [{
					required: true,
					message: '请选择是否存在整体面层严重损坏',
					trigger: 'submit'
				}],
				woodFloorDamageIssue: [{
					required: true,
					message: '请选择是否存在木楼地面严重损坏',
					trigger: 'submit'
				}],
				stairsDamageIssue: [{
					required: true,
					message: '请选择楼梯是否严重损坏',
					trigger: 'submit'
				}],
				otherFloorDamageIssue: [{
					required: true,
					message: '请选择是否存在其他楼地面损坏',
					trigger: 'submit'
				}],
				otherIssue: [{
					required: true,
					message: '请选择是否存在其他问题',
					trigger: 'submit'
				}],
				exteriorDecorationIssue: [{
					required: true,
					message: '请选择外檐装饰材料是否存在问题',
					trigger: 'submit'
				}],
				balconyRailingIssue: [{
					required: true,
					message: '请选择阳台栏板是否存在问题',
					trigger: 'submit'
				}],
				windowDoorIssue: [{
					required: true,
					message: '请选择门窗是否存在问题',
					trigger: 'submit'
				}],
				ceilingIssue: [{
					required: true,
					message: '请选择顶棚是否存在问题',
					trigger: 'submit'
				}],
				decorationOtherIssue: [{
					required: true,
					message: '请选择装修部分是否存在其他问题',
					trigger: 'submit'
				}],
				drainageIssue: [{
					required: true,
					message: '请选择下水道是否严重堵塞',
					trigger: 'submit'
				}],
				powerLineIssue: [{
					required: true,
					message: '请选择电力管线是否老化',
					trigger: 'submit'
				}],
				equipmentOtherIssue: [{
					required: true,
					message: '请选择设备部分是否存在其他问题',
					trigger: 'submit'
				}],
				// 查勘结论必填验证
				hasNewDamage: [{
					required: true,
					message: '请选择是否存在新增加的损坏部位',
					trigger: 'submit'
				}],
				hasExistingDamageExpansion: [{
					required: true,
					message: '请选择原有损坏部位是否存在扩大或程度加重',
					trigger: 'submit'
				}],
				isDamageGradeAdjusted: [{
					required: true,
					message: '请选择完损评定等级是否调整',
					trigger: 'submit'
				}],
				participateInCityInspection: [{
					required: true,
					message: '请选择是否参与城市体检',
					trigger: 'submit'
				}]
			},

			formData: {
				address: '',
				addressStatus: '',
				aboveGroundFloors: 0,
				undergroundFloors: 0,
				buildingArea: 0.00,
				buildingHeight: 0.00,
				buildingPeriod: '2025',
				houseCount: 0,
				houseUsage: '',
				protectionNature: '',
				protectionType: '',
				structureType: '',
				floorForm: '',
				// 地基基础检查项字段
				foundationIssue: null,
				foundationInputText: '',
				foundationAttachments: '',
				foundationDescription: '无',
				// 钢筋混凝土柱检查项字段
				concreteColumnIssue: null,
				concreteColumnInputText: '',
				concreteColumnAttachments: '',
				concreteColumnDescription: '',
				// 砌体结构检查项字段
				masonryIssue: null,
				masonryLocation: '',
				masonryAttachments: '',
				masonryDescription: '',
				// 木构件检查项字段
				woodenIssue: null,
				woodenLocation: '',
				woodenAttachments: '',
				woodenDescription: '',
				// 屋面-严重漏雨检查项字段
				roofLeakageIssue: null,
				roofLeakageLocation: '',
				roofLeakageAttachments: '',
				roofLeakageDescription: '',
				// 屋面-构造层缺陷检查项字段
				roofStructureIssue: null,
				roofStructureLocation: '',
				roofStructureAttachments: '',
				roofStructureDescription: '',
				// 楼地面损坏检查项字段
				floorOverallDamageIssue: null,
				floorOverallDamageLocation: '',
				floorOverallDamageAttachments: '',
				floorOverallDamageDescription: '',
				// 木楼地面严重损坏检查项字段
				woodFloorDamageIssue: null,
				woodFloorDamageLocation: '',
				woodFloorDamageAttachments: '',
				woodFloorDamageDescription: '',
				// 楼梯严重损坏检查项字段
				stairsDamageIssue: null,
				stairsDamageLocation: '',
				stairsDamageAttachments: '',
				stairsDamageDescription: '',
				// 其他楼地面损坏检查项字段
				otherFloorDamageIssue: null,
				otherFloorDamageLocation: '',
				otherFloorDamageAttachments: '',
				otherFloorDamageDescription: '',
				// 其他问题检查项字段
				otherIssue: null,
				otherIssueLocation: '',
				otherIssueAttachments: '',
				otherIssueDescription: '',
				// 装修部分 - 外檐装饰材料检查项字段
				exteriorDecorationIssue: null,
				exteriorDecorationLocation: '',
				exteriorDecorationAttachments: '',
				exteriorDecorationDescription: '',
				// 装修部分 - 阳台栏板检查项字段
				balconyRailingIssue: null,
				balconyRailingLocation: '',
				balconyRailingAttachments: '',
				balconyRailingDescription: '',
				// 装修部分 - 门窗检查项字段
				windowDoorIssue: null,
				windowDoorLocation: '',
				windowDoorAttachments: '',
				windowDoorDescription: '',
				// 装修部分 - 顶棚检查项字段
				ceilingIssue: null,
				ceilingLocation: '',
				ceilingAttachments: '',
				ceilingDescription: '',
				// 装修部分 - 其他问题检查项字段
				decorationOtherIssue: null,
				decorationOtherLocation: '',
				decorationOtherAttachments: '',
				decorationOtherDescription: '',
				// 设备部分 - 下水道严重堵塞检查项字段
				drainageIssue: null,
				drainageLocation: '',
				drainageAttachments: '',
				drainageDescription: '',
				// 设备部分 - 电力管线老化检查项字段
				powerLineIssue: null,
				powerLineLocation: '',
				powerLineAttachments: '',
				powerLineDescription: '',
				// 设备部分 - 其他问题检查项字段
				equipmentOtherIssue: null,
				equipmentOtherLocation: '',
				equipmentOtherAttachments: '',
				equipmentOtherDescription: '',
				// 查勘结论部分字段
				hasNewDamage: null, // 是否存在新增加的损坏部位
				newDamageDescription: '', // 新增加的损坏情况说明
				hasExistingDamageExpansion: null, // 原有损坏部位是否存在扩大或程度加重
				existingDamageDescription: '', // 原有损坏部位扩大或程度加重说明
				isDamageGradeAdjusted: null, // 完损评定等级是否调整
				damageGradeAdjustmentDescription: '', // 完损评定等级调整说明
				participateInCityInspection: null, // 是否参与城市体检
				cityInspectionDescription: '', // 城市体检说明
				cityInspectionAttachments: '' // 城市体检附件
			}
		}
	},
	computed: {},
	watch: {
		// 监听新增损坏字段变化，选择"否"时清空说明
		'formData.hasNewDamage'(newVal) {
			if (newVal === 0) {
				this.formData.newDamageDescription = ''
			}
		},
		// 监听原有损坏扩大字段变化，选择"否"时清空说明
		'formData.hasExistingDamageExpansion'(newVal) {
			if (newVal === 0) {
				this.formData.existingDamageDescription = ''
			}
		},
		// 监听完损等级调整字段变化，选择"否"时清空说明
		'formData.isDamageGradeAdjusted'(newVal) {
			if (newVal === 0) {
				this.formData.damageGradeAdjustmentDescription = ''
			}
		},
		// 监听城市体检字段变化，选择"否"时清空说明
		'formData.participateInCityInspection'(newVal) {
			if (newVal === 0) {
				this.formData.cityInspectionDescription = ''
			}
		}
	},
	methods: {

		// 通用字典名称查找方法
		getDictName(dictType, id) {
			const item = this.dictData[dictType].find(item => item.id === String(id));
			return item ? item.name : id;
		},

		// 根据名称查找ID的辅助方法
		getDictIdByName(dictType, name) {
			if (!name) return null;
			const item = this.dictData[dictType].find(item => item.name === name);
			return item ? item.id : null;
		},

		// 表单验证方法（使用el-form的原生验证）
		validate() {
			return new Promise((resolve, reject) => {
				// 动态添加条件验证规则
				this.addDynamicRules()

				// 使用el-form的原生validate方法
				this.$refs.severeForm.validate((valid) => {
					if (valid) {
						resolve(true)
					} else {
						this.$message.error('请检查表单填写，有必填项未填写或格式不正确')
						reject(false)
					}
				})
			})
		},

		// 动态添加验证规则
		addDynamicRules() {
			// InspectionItem组件现在会自己管理验证规则，这里只需要处理查勘结论部分

			// 为查勘结论的说明字段添加动态验证
			if (this.formData.hasNewDamage === 1) {
				this.$set(this.rules, 'newDamageDescription', [{
					required: true,
					message: '选择"是"时，此项为必填项',
					trigger: 'submit'
				}])
			} else {
				this.$delete(this.rules, 'newDamageDescription')
			}

			if (this.formData.hasExistingDamageExpansion === 1) {
				this.$set(this.rules, 'existingDamageDescription', [{
					required: true,
					message: '选择"是"时，此项为必填项',
					trigger: 'submit'
				}])
			} else {
				this.$delete(this.rules, 'existingDamageDescription')
			}

			if (this.formData.isDamageGradeAdjusted === 1) {
				this.$set(this.rules, 'damageGradeAdjustmentDescription', [{
					required: true,
					message: '选择"是"时，此项为必填项',
					trigger: 'submit'
				}])
			} else {
				this.$delete(this.rules, 'damageGradeAdjustmentDescription')
			}

			if (this.formData.participateInCityInspection === 1) {
				this.$set(this.rules, 'cityInspectionDescription', [{
					required: true,
					message: '选择"是"时，此项为必填项',
					trigger: 'submit'
				}])
			} else {
				this.$delete(this.rules, 'cityInspectionDescription')
			}
		},

		// 重置表单方法
		resetForm() {
			// 使用 el-form 的 resetFields 方法
			this.$refs.severeForm.resetFields()

			// 手动设置默认值
			this.$nextTick(() => {
				this.formData.buildingPeriod = '2025'
				this.formData.foundationDescription = '无'
			})
		},

		// 清除验证结果
		clearValidate() {
			this.$refs.severeForm.clearValidate()
		},

		// 提交表单方法
		async submitForm() {
			try {
				await this.validate()
				// 验证通过，可以提交表单数据
				console.log('表单数据：', this.formData)
				this.$message.success('表单验证通过！')
				return this.formData
			} catch (error) {
				console.error('表单验证失败：', error)
				throw error
			}
		}
	}
}
</script>

<style scoped>
.severe-damage-form {
	background: #fff;
	padding: 20px;
	border-radius: 8px;
}

/* el-form-item 样式调整 */
::v-deep .el-form-item {
	margin-bottom: 18px;
}

::v-deep .el-form-item__label {
	font-weight: 500;
	color: #606266;
}

.form-header {
	text-align: center;
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 2px solid #409EFF;
}

.form-title {
	margin: 0;
	color: #409EFF;
	font-size: 24px;
	font-weight: bold;
}

.section {
	margin-bottom: 30px;
}

.section-title {
	margin: 0 0 20px 0;
	color: #303133;
	font-size: 18px;
	font-weight: 600;
	padding: 10px;
	background: #f5f7fa;
	border-left: 4px solid #409EFF;
}

.structure-section {
	border: 1px solid #e4e7ed;
	border-radius: 8px;
	padding: 10px;
	background: #fafafa;
}

/* Element UI 组件样式调整 */
::v-deep .el-input-number {
	width: 100%;
}

::v-deep .el-date-picker {
	width: 100%;
}

::v-deep .el-textarea .el-textarea__inner {
	resize: vertical;
}

::v-deep .el-radio {
	margin-right: 15px;
}

::v-deep .el-radio__label {
	font-size: 14px;
}

@media (max-width: 768px) {
	/* 移动端响应式样式 - 现在主要使用 el-row 和 el-col 的原生响应式 */
}

.inspection-item {
	margin-bottom: 10px;
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #e4e7ed;
}
</style>